<template>
    <div class="device-list">
        <div class="device-list-container flex-container">


            <div class="device-list-table">

                <el-table :data="goodsList" border>

                    <el-table-column label="ID" prop="id" width="60"></el-table-column>
                    <el-table-column label="商品名称" prop="name" min-width="180"></el-table-column>
                    <el-table-column label="封面图" min-width="180">
                        <template slot-scope="scope">
                            <img :src="scope.row.cover_img_url" alt="" class="thumb-img" v-viewer>
                        </template>
                    </el-table-column>
                    <el-table-column label="指导价">
                        <template slot-scope="scope">
                            {{scope.row.guide_price | currencyFormat}}
                        </template>
                    </el-table-column>
                    <el-table-column label="价格">
                        <template slot-scope="scope">
                            {{scope.row.price | currencyFormat}}
                        </template>
                    </el-table-column>
                    <el-table-column label="运费">
                        <template slot-scope="scope">
                            {{scope.row.express_fee | currencyFormat}}
                        </template>
                    </el-table-column>
                    <el-table-column label="标签">
                        <template slot-scope="scope">
                            <el-tag type="success" size="mini" v-if="scope.row.label_name">{{scope.row.label_name}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格数" prop="goods_spec_count"></el-table-column>
                    <el-table-column label="排序" width="70px">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.weight" @blur="inputBlur(scope.row.weight, scope.row.id)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="200">
                        <template slot-scope="scope">
                            <el-button type="success outline" size="mini"
                                       @click="handleEdit(scope.$index, scope.row)">
                                编辑
                            </el-button>
                            <el-button type="info outline" size="mini"
                                       @click="toGoodsSpecPage(scope.row)">
                                规格设置
                            </el-button>
                            <el-button size="mini" type="danger outline"
                                       @click="handleDelete(scope.$index, scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="flex-footer h-80">
                <div class="flex-footer-content">
                    <el-row>
                        <el-col :span="8" class="pt-6">&nbsp;
                            <el-button type="success" @click="handleAddGoods()">新增商品</el-button>
                        </el-col>
                        <el-col :span="16" class="text-right" v-if="total > 0">
                            <el-pagination
                                    @current-change="pageChange"
                                    :current-page="currentPage"
                                    :page-size="pageSize"
                                    layout="total, prev, pager, next, jumper"
                                    :total="total">
                            </el-pagination>
                        </el-col>
                        <!--<el-col :span="8" class="text-center" v-if="total > 0"></el-col>-->
                    </el-row>
                </div>
            </div>
        </div>

        <!--编辑弹窗-->
        <el-dialog title="商品编辑" custom-class="edit-dialog" width="550px" :visible.sync="editModalVisible"
                   @close="handleEditModalClose">
            <el-form :label-position="'left'" label-width="110px" ref="userForm" :model="goodsForm">
                <el-form-item label="商品名称">
                    <el-input v-model="goodsForm.name" placeholder="请输入商品名称"></el-input>
                </el-form-item>
                <el-form-item label="封面图">
                    <el-upload
                            class="avatar-uploader"
                            :action="Core.Const.NET.UPLOAD_FILE_URL"
                            :show-file-list="false"
                            :on-success="handleCoverImgUploadSuccess">
                        <img v-if="coverImgUrl" :src="coverImgUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="轮播图">
                    <el-upload
                            class="upload-demo"
                            :action="Core.Const.NET.UPLOAD_FILE_URL"
                            :on-remove="handleRemove"
                            :on-success="handleImgListSuccess"
                            :file-list="imgListUrl"
                            list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">建议尺寸(351 * 165) 只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="指导价">
                    <el-input v-model="goodsForm.guidePrice" placeholder="">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="goodsForm.price" placeholder="">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="快递费">
                    <el-input v-model="goodsForm.expressFee" placeholder="">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="发货地">
                    <el-input v-model="goodsForm.origin" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="商品描述">
                    <el-input
                            type="textarea" :rows="2" placeholder=""
                            v-model="goodsForm.description">
                    </el-input>
                </el-form-item>
                <el-form-item label="产品参数图">
                    <el-upload
                            class="avatar-uploader"
                            :action="Core.Const.NET.UPLOAD_FILE_URL"
                            :show-file-list="false"
                            :on-success="handleParameterImgUploadSuccess">
                        <img v-if="parameterImgUrl" :src="parameterImgUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="产品详情图">
                    <el-upload
                            class="avatar-uploader"
                            :action="Core.Const.NET.UPLOAD_FILE_URL"
                            :show-file-list="false"
                            :on-success="handleDetailImgUploadSuccess">
                        <img v-if="detailImgUrl" :src="detailImgUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="标签">
                    <el-select v-model="goodsForm.label" placeholder="请选择">
                        <el-option
                                v-for="item in tpCodeList"
                                :key="item.code"
                                :label="item.value"
                                :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="saveGoods('goodsForm')">保存</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script type="text/ecmascript-6">

    import Core from 'core/core'

    export default {
        data() {
            return {
                Core: Core,
                editModalVisible: false,
                goodsForm: {
                    id: 0,
                    name: "",
                    coverImg: "",
                    imgList: "",
                    guidePrice: 0,
                    price: 0,
                    label: "",
                    expressFee: 0,
                    origin: "",
                    description: "",
                    detailImg: "",
                    parameter: "",
                },

                coverImgUrl: "",
                imgListUrl: [],
                goodsList: [],
                tpCodeList: [],

                parameterImgUrl: "",
                detailImgUrl: "",

                // 分页配置
                currentPage: 1,
                total: 0,
                pageSize: 10,
            }
        },
        mounted: function () {
            this._goodsList();

            this._tpCodeList();
        },

        methods: {
            _tpCodeList() {
                Core.Api.TpCode.list('goods_label')
                    .then(res => {
                        this.tpCodeList = res.list;
                        this.tpCodeList.unshift({
                            id: 0,
                            code: "",
                            value: "无"
                        })
                    })
            },
            _goodsList() {
                Core.Api.Goods.list("", this.currentPage)
                    .then(res => {
                        this.goodsList = res.list;
                        this.total = res.count
                    })
                    .catch(err => {
                    })
            },

            pageChange(val) {
                this.currentPage = val;
                this._goodsList();
            },

            saveGoods(formName) {

                Core.Api.Goods.saveGoods(
                    this.goodsForm.id,
                    this.goodsForm.name,
                    this.goodsForm.coverImg,
                    this.goodsForm.imgList,
                    this.goodsForm.guidePrice * 100,
                    this.goodsForm.price * 100,
                    this.goodsForm.expressFee * 100,
                    this.goodsForm.origin,
                    this.goodsForm.label,
                    this.goodsForm.description,
                    this.goodsForm.detailImg,
                    this.goodsForm.parameter
                ).then(res => {
                    this.editModalVisible = false;
                    this.$message.success("保存成功");
                    this._goodsList();
                })
            },

            handleDelete(index, row) {
                this.$confirm('确认删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    Core.Api.Goods.deleteGoods(row.id)
                        .then(res => {
                            this.$message.success("删除成功");
                            this._goodsList();
                        })
                });
            },

            handleEdit(index, row) {
                this.goodsForm = {
                    id: row.id,
                    name: row.name,
                    coverImg: row.cover_img,
                    imgList: row.img_list,
                    guidePrice: row.guide_price / 100,
                    price: row.price / 100,
                    label: row.label == 0 ? "" : row.label,
                    expressFee: row.express_fee / 100,
                    origin: row.origin,
                    description: row.description,
                    detailImg: row.detail_img,
                    parameter: row.parameter
                };

                if (this.goodsForm.coverImg) {
                    this.coverImgUrl = Core.Const.NET.FILE_STATIC_URL + this.goodsForm.coverImg;
                }
                if (this.goodsForm.parameter) {
                    this.parameterImgUrl = Core.Const.NET.FILE_STATIC_URL + this.goodsForm.parameter;
                }
                if (this.goodsForm.detailImg) {
                    this.detailImgUrl = Core.Const.NET.FILE_STATIC_URL + this.goodsForm.detailImg;
                }
                let arr = [];
                this.goodsForm.imgList.split(',').map(item => {
                    arr.push({
                        url: Core.Const.NET.FILE_STATIC_URL + item
                    })
                });
                this.imgListUrl = arr;

                this.editModalVisible = true;
            },

            handleAddGoods() {
                this.editModalVisible = true;
            },

            handleEditModalClose() {
                Core.Util.clearData(this.goodsForm);

                this.coverImgUrl = "";
                this.imgListUrl = [];
            },

            handleCoverImgUploadSuccess(res, file) {
                this.goodsForm.coverImg = res.data.filename;
                this.coverImgUrl = res.data.file_url;
            },

            handleParameterImgUploadSuccess(res, file) {
                this.goodsForm.parameter = res.data.filename;
                this.parameterImgUrl = res.data.file_url;
            },

            handleDetailImgUploadSuccess(res, file) {
                this.goodsForm.detailImg = res.data.filename;
                this.detailImgUrl = res.data.file_url;
            },

            handleRemove(file, fileList) {
                let arr = [];
                fileList.map(it => {
                    arr.push(it.response.data.filename);
                });

                this.goodsForm.imgList = arr.join(',');
            },

            handleImgListSuccess(res, file, fileList) {
                let arr = [];
                fileList.map(it => {
                    arr.push(it.response.data.filename);
                });

                this.goodsForm.imgList = arr.join(',');
            },

            toGoodsSpecPage(item) {
                this.$router.push('/goods/goods-spec-list?goods_id=' + item.id);
            },

            inputBlur(weight, id) {

                Core.Api.Goods.updateSort(id, weight)
                    .then(res => {
                        this._goodsList();
                    })
            }

        },


    }
</script>

<style scoped lang="scss">
    .device-list {
        height: 100%;
        .device-list-container {
            height: 100%;
            .search-row {
                margin: 0;
                padding: 15px 30px;
                background: #fff;
                .el-form--inline .el-form-item {
                    margin-bottom: 0;
                }
                .el-form-item__label {
                    padding-right: 10px;
                    font-size: 12px;
                }
                .el-form-item__content {
                    .el-input {
                        width: 175px;
                    }
                }
            }

            .device-list-table {
                padding: 20px 0;
                background: #ffffff;
                position: relative;
                flex: 1;
                overflow: auto;
                .all-select-holder {
                    line-height: 30px;
                    position: absolute;
                    left: 10px;
                    z-index: 10;
                }
            }
            .flex-footer {
                border-top: 1px solid #E0E7EF;
            }
            .flex-footer.h-80 {
                height: 80px;
            }

        }

        a.success {
            display: inline-block;
            color: #fff;
            background-color: #03CC75;
            border-color: #03CC75;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            padding: 7px 16px;
            font-size: 12px;
            border-radius: 4px;
            margin: 0 10px;
        }

        .upload-device {
            display: inline-block;
        }
    }
</style>
